import { useEffect, useState } from "react";
import { Form, Input, Button, message, Card, Space, Typography } from "antd";
import { useUserInfo } from "@/store/userStore";
import userService from "@/api/services/userService";
import { UploadBox } from "@/components/upload/upload-box";

const BasicInfoTab = () => {
	const { username } = useUserInfo();
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);

	useEffect(() => {
		const fetchUserInfo = async () => {
			try {
				const userInfo = await userService.getMyInfo();
				console.log(userInfo);

				form.setFieldsValue({
					nickname: userInfo.nickname,
					company: userInfo.company,
					mobile: userInfo.mobile,
					wechat_account: userInfo.wechat_account,
					remark: userInfo.remark,
					business_license_img: userInfo.business_license_img,
					website_logo: userInfo.website_logo,
				});
			} catch (error) {
				message.error("获取用户信息失败");
			}
		};
		fetchUserInfo();
	}, [form]);

	const onFinish = async (values: any) => {
		try {
			setLoading(true);
			await userService.updateMyInfo({
				...values,
			});
			message.success("保存成功");
		} catch (error) {
			message.error("保存失败");
		} finally {
			setLoading(false);
		}
	};

	return (
		<Card>
			<Form
				form={form}
				layout="vertical"
				onFinish={onFinish}
				initialValues={{
					username,
				}}
			>
				<Form.Item label="姓名" name="nickname">
					<Input placeholder="请输入姓名" />
				</Form.Item>

				<Form.Item label="公司名称" name="company">
					<Input placeholder="请输入公司名称" />
				</Form.Item>

				<Form.Item label="手机号" name="mobile">
					<Input disabled placeholder="请输入手机号" />
				</Form.Item>

				<Form.Item label="微信账户" name="wechat_account">
					<Input  placeholder="请输入微信账户" />
				</Form.Item>

				<Form.Item label="备注" name="remark">
					<Input.TextArea placeholder="请输入备注信息" rows={4} />
				</Form.Item>

				<Form.Item
					label={
						<Space>
							<span>营业执照</span>
							<Typography.Text type="secondary" className="text-xs">
								(支持jpg、png格式)
							</Typography.Text>
						</Space>
					}
					name="business_license_img"
					rules={[{ message: "请上传营业执照" }]}
				>
					<UploadBox style={{ width: "200px", height: "200px" }} />
				</Form.Item>

				<Form.Item
					label={
						<Space>
							<span>工作室门头照</span>
							<Typography.Text type="secondary" className="text-xs">
								(建议尺寸：200x200px，支持jpg、png格式)
							</Typography.Text>
						</Space>
					}
					name="website_logo"
				>
					<UploadBox
						accept="image/jpeg,image/png"
						style={{ width: "200px", height: "200px" }}
					/>
				</Form.Item>

				<Form.Item>
					<Space>
						<Button type="primary" htmlType="submit" loading={loading}>
							保存
						</Button>
						<Button onClick={() => form.resetFields()}>重置</Button>
					</Space>
				</Form.Item>
			</Form>
		</Card>
	);
};

export default BasicInfoTab;
